<template>
  <div id="mg-home">
    <div class="column-box">
      <div class="column-title-box">
        <div class="column-title" style="width: 120px;"><h1>热门榜</h1></div>
        <ul id="nav1">
          <li class="slide"></li>
          <li v-for="(item) in heatRankingNavs" :key="item.id" @click="getHeatRankingData(item.id)">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <ranking-items v-if="heatRankingData.length > 0" :listData="heatRankingData"/>
      <empty-box tip="还没有热门漫画呢~" v-else/>
    </div>
    <div class="column-box animate__animated animate__slideInUp">
      <div class="column-title-box">
        <div class="column-title" style="width: 120px;"><h1>爆肝榜</h1></div>
        <ul id="nav2">
          <li class="slide"></li>
          <li v-for="(item) in updateRankingNavs" :key="item.id" @click="getUpdateRankingData(item.id)">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <ranking-cards v-if="updateRankingData.length > 0" :listData="updateRankingData"/>
      <empty-box tip="催更!!" v-if="updateRankingData.length === 0"/>
    </div>
    <div class="column-box animate__animated animate__slideInUp">
      <div class="column-title-box">
        <h1 class="column-title">最近更新</h1>
      </div>
      <mg-list :mgData="mgData"/>
    </div>
  </div>
</template>

<script>
import {heatRanking, mangaPage, updateRanking} from "@/api/mgApi";
import mgList from '@/components/manga/mgList.vue'
import $ from 'jquery'
import RankingItems from "@/components/manga/RankingItems.vue";
import RankingCards from "@/components/manga/RankingCards.vue";
import bus from "@/bus/bus";

export default {
  name: "mgViewPage",
  components: {RankingCards, RankingItems, mgList},
  data() {
    return {
      page: {
        page: 1,
        size: 5
      },
      pages: 0,
      mgData: [],
      heatRankingNavs: [
        {
          id: 1,
          name: '年'
        },
        {
          id: 2,
          name: '月'
        },
        {
          id: 3,
          name: '周'
        }
      ],
      heatRankingData: [],
      updateRankingNavs: [
        {
          id: 1,
          name: '月'
        },
        {
          id: 2,
          name: '周'
        },
        {
          id: 3,
          name: '日'
        },
      ],
      updateRankingData: [],
      onLoading: false
    }
  },
  mounted() {
    this.loadData()
    this.initiateNavAnimations()
  },
  methods: {
    loadData() {
      if (!this.onLoading) {
        mangaPage(this.page)
            .then(res => {
              let data = res.data
              this.mgData = data.records
              this.pages = data.pages
            }).finally(() => {
          this.onLoading = false
        });
      }
      this.getHeatRankingData(this.heatRankingNavs[0].id)
      this.getUpdateRankingData(this.updateRankingNavs[0].id)
    },
    /**
     * 获取热度榜数据
     * @param cycle 周期
     */
    getHeatRankingData(cycle) {
      heatRanking(cycle).then(res => {
        this.heatRankingData = res.data
      })
    },
    /**
     * 获取更新频率榜数据
     * @param cycle 周期
     */
    getUpdateRankingData(cycle) {
      updateRanking(cycle).then(res => {
        this.updateRankingData = res.data
      })
    },
    /**
     * 初始化导航栏动画
     */
    initiateNavAnimations() {
      let navItem1 = $("#nav1 a");
      let navItem2 = $("#nav2 a");

      navItem1.on("click", function () {
        let position = $(this).parent().position();
        let width = $(this).parent().width();
        $("#nav1 .slide").css({opacity: 1, left: +position.left, width: width});
      });
      {
        let currentWidth = $("#nav1 li:nth-of-type(2) a").parent("li").width();
        let current = $("li:nth-of-type(2) a").position();
        $("#nav1 .slide").css({left: +current.left, width: currentWidth});
      }
      navItem2.on("click", function () {
        let position = $(this).parent().position();
        let width = $(this).parent().width();
        $("#nav2 .slide").css({opacity: 1, left: +position.left, width: width});
      });
      {
        let currentWidth = $("#nav2 li:nth-of-type(2) a").parent("li").width();
        let current = $("li:nth-of-type(2) a").position();
        $("#nav2 .slide").css({left: +current.left, width: currentWidth});
      }
    },
    /**
     * 加载更多
     */
    loadMoreData() {
      // 如果已经加载完所有数据，则不执行加载更多
      if (this.pages <= this.page.page || this.onLoading) {
        return;
      }
      this.page.page++
      mangaPage(this.page)
          .then(res => {
            this.mgData.push(...res.data.records)
          }).finally(() => {
        this.onLoading = false
      });
    }
  },
  created() {
    // 注册触底事件
    bus.$on('homeHitBottom', () => {
      this.loadMoreData()
    })
  },
  beforeDestroy() {
    // 注销触底事件
    bus.$off('homeHitBottom')
  }
}
</script>

<style scoped lang="scss">
@import url("@/scss/mgHome.scss");
</style>